<template>
  <div>
    <h3>请选择商品后台类目</h3>
    <a-cascader
        style="width: 400px"
        :options="options"
        @change="onChange"
        placeholder="请选择后台类目"
        :default-value="defaultValue"
    />
    <div style="margin-top: 30px">
      <a-button type="primary" style="margin-right: 20px;background-color: black" @click="goToShopEditClick()">
        下一步
      </a-button>
      <a-button @click="$router.back()">返回</a-button>
    </div>

  </div>
</template>

<script>
import {getAllCategoryList} from '@/api'


export default {
  name: "shop-add",
  data() {
    return {
      defaultValue: [],
      options: [],
      categoryId: '',
    }
  },
  methods: {
    goToShopEditClick() {
      let title = this.options.find(item => {
        if (item.value === this.categoryId) {
          return item
        }
      }).label
      this.$router.push({
        query: {
          categoryId: this.categoryId,
          title: title,
        },
        path: '/shop/shop-edit'
      })
    },
    onChange(value) {
      this.categoryId = value[0]
    },
    async getAllCategoryListFn() {
      const res = await getAllCategoryList(1)
      this.options = res.value.map(item => {
        return {
          label: item.title,
          value: item.id,
          isLeaf: false,
          pid: item.pid,
          rid: item.rid || item.id,
          level: item.level,
          disabled: item.status === 1,
        }
      })
    }
  },
  mounted() {
    this.getAllCategoryListFn()
  }
}
</script>

<style scoped lang="less">

</style>